<template>
  <div id="teacherteam">
    <div class="main">
      <Row>
        <!-- 大标题 -->
        <Col span="4" class="maxTitle titleBorder">{{teacherInfo.maxTitle}}</Col>
        <Col span="6" class="titleBorder">&nbsp</Col>
        <Col span="6" class="titleBorder">&nbsp</Col>
        <Col span="5" class="titleBorder">&nbsp</Col>
      </Row>

      <div class="content">
        <Row>
          <Col>
          <!-- swiper容器 -->
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div
                  class="swiper-slide"
                  v-for="teacher in teacherInfo.teachers"
                  :key="teacher._id"
                >
                  <!-- 教师卡片组件 -->
                  <TeacherCard :teacherInfo="teacher" />
                </div>
              </div>
              <!-- Add Pagination -->
              <!-- <div class="swiper-pagination"></div> -->
            </div>
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
//iview-ui组件导入
import { Row, Col } from "view-design";
//导入swiper组件
import Swiper from "swiper";
//导入swiper样式文件
import "swiper/css/swiper.min.css";
//教师展示卡片组件
import TeacherCard from "../../Introduction/TeacherTeam/TeacherCard";

export default {
  name: "teacherteam",
  //组件注册
  components: {
    Row,
    Col,
    TeacherCard
  },
  //数据属性传入
  props: ["teacherInfo"],
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {
    //挂载swiper轮播图  当数据到达时候才会挂载显示 在外层做了v-if=""数据到达校验
    var swiper = new Swiper(".swiper-container", {
      slidesPerView: 1.5,  //视觉内可以显示几张卡片一半代表0.5
      spaceBetween: 15,   //卡片左右边距
      freeMode: true,
      slidesOffsetBefore: 20, //前卡片偏移
      slidesOffsetAfter: 20   //后卡片偏移
      // pagination: {
      //   el: '.swiper-pagination',
      //   clickable: true,
      // },
    });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {
     
  }, //生命周期 - 更新之前
  updated() {
    
      

  }, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped>
.main {
}
.maxTitle {
  margin-left: 20px;
  border-bottom: 2px solid #33333388 !important;
}
.titleBorder {
  font-size: 15px;
  border-bottom: 2px solid #e9e9e9;
  padding-bottom: 5px;
}
.content {
  margin: 20px 0;
}
</style>